<template>
	<view>
		<u-navbar ref="navbar" title-color="#fff" back-icon-color="#ffffff" :background="background"
			:back-text-style="{ color: '#fff' }">
			<view class="slot-wrap">
				<text @click="showPop">手机手<u-icon :name="show?'arrow-up':'arrow-down'"></u-icon></text>
				<view class="search-wrap">
					<u-search v-model="key" placeholder="设备编号&名称" height="56" @search="search" @custom="search"
						:action-style="{ color: '#fff' }"></u-search>
				</view>
			</view>
		</u-navbar>
		<u-sticky>
			<view class="">
				<u-dropdown>
					<u-dropdown-item v-model="value1" :title="'状态:'+formatLable(value1,options1)" :options="options1">
					</u-dropdown-item>
					<u-dropdown-item v-model="value2" :title="'模式:'+formatLable(value2,options2)" :options="options2">
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</u-sticky>
		<view class="content">
			<u-cell-group>
				<view v-for="(item, index) in list" :key="index">
					<u-cell-item :title="item.code" @click="goTo(item.id)">{{ item.name }}</u-cell-item>
					<u-line></u-line>
				</view>
			</u-cell-group>
			<u-card margin="30rpx 30rpx" :show-head="false" box-shadow="0px 0px 15px 0px #e3e3e3">
				<view class="" slot="body">
					<view class="u-text-center u-main-color u-font-32 u-rela">北京师范大学新余附属中学 <text
							class="title-tag"></text></view>
					<view class="u-text-center  u-margin-top-20 u-margin-bottom-20">最新上报时间：2021-12-24 10:00:00</view>
					<view class="u-text-center  u-margin-top-20 u-margin-bottom-20">
						<u-row gutter="16">
							<u-col span="4" text-align="center">
								<view class="demo-layout bg-purple">水温：46°</view>
							</u-col>
							<u-col span="4" text-align="center">
								<view class="demo-layout bg-purple-light">电流：185A</view>
							</u-col>
							<u-col span="4" text-align="center">
								<view class="demo-layout bg-purple-dark">液位：185cm</view>
							</u-col>
						</u-row>
					</view>
					<view class="u-text-center  u-margin-top-20 u-margin-bottom-20">
						<text>故障：</text>
						<text class="tag-color">主机1</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">主机2</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">进水</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">烟雾</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">液位</text>
						<text class="u-margin-left-20 tag-color">|</text>
					</view>
					<view class="u-text-center">
						<text>设备开关项：</text>
						<text>出水</text>
						<text>|</text>
						<text>热水器1</text>
						<text>|</text>
						<text>热水器2</text>
						<text>|</text>
						<text class="u-margin-left-50">模式:自动</text>
					</view>
				</view>
			</u-card>
		</view>
		<u-gap height="20"></u-gap>
		<u-loadmore :status="status" @loadmore="loadmore" />
		<u-gap height="20"></u-gap>
		<template v-if="visible">
			<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" :popMenu="false" @fabClick="add"></uni-fab>
		</template>
		<u-popup v-model="show" mode="top" :mask="false" :custom-style="popStyle">
			<tree-com></tree-com>
		</u-popup>
	</view>
</template>

<script>
	import treeCom from '../../../com/tree/index'
	import {getDeviceMonitorList} from '../../../../api/eqment/index.js'
	export default {
		components: {
			treeCom
		},
		data() {
			return {
				// 按钮显示
				visible: false,
				// 加号样式
				pattern: {
					buttonColor: '#409EFF'
				},
				page: 1,
				status: 'loadmore',
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				popStyle: {},
				key: '',
				list: [],
				show: false,
				value1: 1,
				value2: 1,
				options1: [{
						label: '全部',
						value: 1,
					},
					{
						label: '在线',
						value: 2,
					},
					{
						label: '离线',
						value: 3,
					}
				],
				options2: [{
						label: '全部',
						value: 1,
					},
					{
						label: '自动',
						value: 2,
					},
					{
						label: '手动',
						value: 3,
					}
				],
			};
		},
		onShow() {
			this.search();
		},
		methods: {
			showPop() {
				this.popStyle = {
					top: this.$refs.navbar.navbarHeight + 'px'
				}
				this.show = true
			},
			scanCode() {
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					success: res => {
						this.key = res.result;
						this.search();
					}
				});
			},
			add() {
				uni.navigateTo({
					url: 'add'
				});
			},
			goTo(id) {
				uni.navigateTo({
					url: 'detail?id=' + id
				});
			},
			search() {
				this.page = 1;
				getDeviceMonitorList({
					 pageNum:1,
					 pageSize:20,
					 orgId:1,
					 typeId:1,
				}).then(res => {
					console.log(123,res)
				})
				this.request({
					url: 'BaseEquipment/pages',
					data: {
						key: this.key,
						limit: 10
					},
					success: res => {
						this.list = res.data;
						if (res.data.length < 10) {
							this.status = 'nomore';
						}
					}
				});
			},
			loadmore() {
				this.request({
					url: 'BaseEquipment/pages',
					data: {
						page: ++this.page,
						limit: 10,
						key: this.key
					},
					success: res => {
						if (res.data.length < 10) {
							this.status = 'nomore';
						}
						if (res.data.length == 0) {
							return this.$u.toast('已无更多数据！');
						} else {
							this.list = this.list.concat(res.data);
						}
					}
				});
			},
			formatLable(val, opt) {
				const optItem = opt.find(item => val == item.value)

				return optItem ? optItem.label : ''
			}
		}
	};
</script>

<style>
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.tag-color {
		color: #19be6b;
	}

	.title-tag {
		position: absolute;
		right: 0;
		top: 0;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #19be6b;
	}

	/deep/.u-drawer-content.u-drawer-content-visible {
		box-shadow: 0px 5px 15px 0px #999;
	}

	/deep/.u-sticky {
		background-color: #fff;
	}
</style>
